<template>
  <el-dialog :title="title" :visible.sync="dialogVisible">
    <el-form label-width="120px">
      <el-form-item label="标题">
        <el-input v-model="bannerItem.title" />
      </el-form-item>
      <el-form-item label="banner跳转链接">
        <el-input v-model="bannerItem.linkUrl" />
      </el-form-item>
      <el-form-item label="banner图">
        <!--        <el-upload-->
        <!--          :action="BASE_API+'eduoss/file/upload'"-->
        <!--          :on-success="handleSuccess"-->
        <!--          list-type="picture-card"-->
        <!--          :on-preview="handlePictureCardPreview"-->
        <!--          :on-remove="handleRemove">-->
        <!--          <i class="el-icon-plus"></i>-->
        <!--          <img v-if="bannerItem.imageUrl" width="200" height="100" :src="bannerItem.imageUrl" class="avatar">-->
        <!--          <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
        <!--        </el-upload>-->
        <el-upload :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-remove="handleRemove"
          :action="BASE_API + '/eduoss/fileoss'" class="avatar-uploader">
          <img v-if="bannerItem.imageUrl" :src="bannerItem.imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

      </el-form-item>
      <el-form-item label="讲师排序">
        <el-input-number v-model="bannerItem.sort" controls-position="right" min="0" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" :disabled="saveBtnDisabled" @click="saveOrUpdate">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import banner from '@/api/cms/banner'
const defaultForm = {
  title: '',
  sort: 0,
  imageUrl: '/static/timg.jpg',
  linkUrl: ''
}
export default {
  name: "form",
  components: {

  },
  data() {
    return {
      title: '添加',
      bannerItem: defaultForm,
      saveBtnDisabled: false, // 保存按钮是否禁用,
      BASE_API: process.env.BASE_API, // 接口API地址
      dialogVisible: false,
    }
  },
  created() {

  },
  methods: {
    openDialog(item) {
      if (item != null && item.id) {
        this.title = '编辑'
        this.bannerItem = item
      } else {
        this.bannerItem = {
          imageUrl: '/static/timg.jpg'
        }
        this.title = '添加'
      }
      this.dialogVisible = true
    },
    saveOrUpdate() {
      this.saveBtnDisabled = true
      console.log(this.bannerItem.id)
      if (!this.bannerItem.id) {
        this.saveData()
      } else {
        this.updateData()
      }
      // console.log(this.$parent)
      this.$parent.fetchData()
    },
    saveData() {
      banner.save(this.bannerItem).then(response => {
        console.log(response)
        if (response.success) {
          this.$message.success("添加成功")
          this.dialogVisible = false
          this.saveBtnDisabled = false
          this.$emit('data-updated')// 触发自定义事件通知父组件数据已更新
        }
      })
    },
    updateData() {
      banner.update(this.bannerItem).then(response => {
        if (response.success) {
          this.$message.success("修改成功")
          this.dialogVisible = false
          this.saveBtnDisabled = false
          this.$emit('data-updated'); // 触发自定义事件通知父组件数据已更新
        }
      })
    },
    //上传之前调用的方法
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleRemove(file, fileList) {
      this.bannerItem.imageUrl = '';
      console.log(file, fileList);
    },
        //上传封面成功调用的方法
        handleAvatarSuccess(res,file){
          this.bannerItem.imageUrl = res.data.url
        },
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>